<template>
  <div>
    <!-- <div class="dashboard-text">name: {{ name }}</div> -->
    <div class="h_l">
      <el-card class="box-card box-card1">
        <div slot="header" class="clearfix">
          <span>当日任务状态分析</span>
          <a style="float: right;padding: 3px 0" type="text">
            详情
            <i class="el-icon-arrow-right" />
          </a>
        </div>
        <div id="echarts-1" class="echarts-div" />
        <div class="echarts-tip echarts-tip1">
          合格率：
          <span>{{ chart1Data.series[0].data[0].value }}%</span>
        </div>
        <div class="echarts-tip echarts-tip2">
          运行时间：
          <span>{{ chart1Data.series[1].data[0].value }}h</span>
        </div>
        <div class="echarts-tip echarts-tip3">
          用工数：
          <span>{{ chart1Data.num }}人</span>
        </div>
        <div class="echarts-tip echarts-tip4">
          总工时：
          <span>{{ chart1Data.totolh }}h</span>
        </div>
        <div class="echarts-tip echarts-tip5">
          耗电量：
          <span>{{ chart1Data.kw }}KW</span>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>生产岗位效率分析</span>
          <a style="float: right;padding: 3px 0" type="text">
            详情
            <i class="el-icon-arrow-right" />
          </a>
        </div>
        <div id="echarts-2" class="echarts-div" />
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>订单任务分析</span>
          <a style="float: right;padding: 3px 0" type="text">
            详情
            <i class="el-icon-arrow-right" />
          </a>
        </div>
        <div id="echarts-3" class="echarts-div" />
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>产品质量状态</span>
          <a style="float: right;padding: 3px 0" type="text">
            详情
            <i class="el-icon-arrow-right" />
          </a>
        </div>
        <div id="echarts-4" class="echarts-div" />
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>告警分析</span>
          <a style="float: right;padding: 3px 0" type="text">
            详情
            <i class="el-icon-arrow-right" />
          </a>
        </div>
        <div id="echarts-5" class="echarts-div" />
      </el-card>
    </div>
    <div class="h_r">
      <el-card class="box-card">
        <!-- <div slot="header" class="clearfix">
          <span>订单信息状况</span>
        </div>-->
        <div>
          <el-tabs v-model="activeName" @tab-click="changeTabs">
            <el-tab-pane label="生产任务动态" name="first" />
            <el-tab-pane label="生产批次动态" name="second" />
            <el-tab-pane label="物料动态" name="third" />
          </el-tabs>
          <swiper ref="mySwiper">
            <swiper-slide class="swiper-slide">
              <el-table
                v-loading="listLoading"
                :data="tableData"
                stripe
                height="1210"
                style="width: 100%;"
              >
                <el-table-column align="center" prop="id" label="生产批次号" />
                <el-table-column align="center" prop="orderId" label="生产任务单" />
                <el-table-column align="center" prop="predictStarTime" label="计划开始时间" />
                <el-table-column align="center" prop="predictEndTime" label="计划结束时间" />
                <el-table-column align="center" prop="starTime" label="实际开始时间" />
                <el-table-column align="center" prop="endTime" label="实际结束时间" />
                <el-table-column align="center" prop label="加工标准" />
                <el-table-column align="center" prop label="物料当前位置" />
                <el-table-column align="center" prop label="物料入库位置" />
                <el-table-column align="center" prop="status" label="生产状态" width="180">
                  <template slot-scope="scope">
                    <span :style="scope.row.status==='未完成'?'color:#ccc':''">{{ scope.row.status }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="120">
                  <template slot-scope="scope">
                    <el-dropdown trigger="click">
                      <span class="el-dropdown-link">
                        <i class="el-icon-s-data el-icon--right" />
                      </span>
                      <el-dropdown-menu slot="dropdown" style="text-align:center">
                        <el-dropdown-item @click.native="goTo('details')">查看详情</el-dropdown-item>
                        <el-dropdown-item @click.native="dialogVisible=true">确认下发</el-dropdown-item>
                        <el-dropdown-item @click.native="dialogVisible=true">核查任务</el-dropdown-item>
                        <el-dropdown-item @click.native="dialogVisible=true">设置损耗量</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </template>
                </el-table-column>
              </el-table>
              <p v-if="hasNaxtPage" style="text-align: center;margin-bottom: 0;">
                <i style="transform: rotate(-90deg);" class="el-icon-d-arrow-right" />上拉加载
              </p>
            </swiper-slide>
            <swiper-slide class="swiper-slide">
              <div>
                <el-table
                  v-loading="listLoading2"
                  :data="tableData2"
                  stripe
                  height="1210"
                  style="width: 100%"
                >
                  <el-table-column align="center" prop="id" label="生产批次号" />
                  <el-table-column align="center" prop="orderId" label="生产订单" />
                  <el-table-column align="center" prop label="计划开始时间" />
                  <el-table-column align="center" prop label="计划结束时间" />
                  <el-table-column align="center" prop label="总工时" />
                  <el-table-column align="center" prop label="当前设备名称" />
                  <el-table-column align="center" prop label="当前设备编号" />
                  <el-table-column align="center" prop label="当前工序" />
                  <el-table-column align="center" prop label="当前责任人" />
                  <el-table-column align="center" prop label="物料领取位置" />
                  <el-table-column align="center" prop label="物料转送位置">
                    <template slot-scope="scope">
                      <span :style="scope.row.status==='未完成'?'color:#ccc':''">{{ scope.row.status }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                      <el-dropdown trigger="click">
                        <span class="el-dropdown-link">
                          <i class="el-icon-s-data el-icon--right" />
                        </span>
                        <el-dropdown-menu slot="dropdown" style="text-align:center">
                          <el-dropdown-item @click.native="goTo('details')">查看详情</el-dropdown-item>
                          <el-dropdown-item @click.native="dialogVisible=true">确认下发</el-dropdown-item>
                          <el-dropdown-item @click.native="dialogVisible=true">核查任务</el-dropdown-item>
                          <el-dropdown-item @click.native="dialogVisible=true">设置损耗量</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </swiper-slide>
            <swiper-slide class="swiper-slide">
              <div>
                <el-table
                  v-loading="listLoading3"
                  :data="tableData3"
                  stripe
                  height="1210"
                  style="width: 100%"
                  class="wuliao"
                >
                  <el-table-column align="center" prop="id" label="生产批次号" />
                  <el-table-column align="center" prop="orderId" label="生产订单" />
                  <el-table-column align="center" prop="materialsCode" label="物料编码" />
                  <el-table-column align="center" prop="status" label="物料动态">
                    <template slot-scope="scope">
                      <span :style="statuscColor(scope.row.status)">{{ scope.row.status }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="starTime" label="开始时间" />
                  <el-table-column align="center" prop="endTime" label="结束时间" />
                  <el-table-column align="center" prop="position" label="物料位置" />
                </el-table>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </el-card>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="60%">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer" style="text-align:center">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getList, getList3, getEchartsData } from "@/api/index";
// 按需引入 引入 ECharts 主模块
var echarts = require("echarts/lib/echarts");
// 引入柱状图
require("echarts/lib/chart/bar");
require("echarts/lib/chart/gauge");
require("echarts/lib/chart/line");
require("echarts/lib/chart/pie");
// 引入提示框和标题组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");

export default {
  name: "Home",
  data() {
    return {
      dialogVisible: false,
      pageData: {},
      hasNaxtPage: false,
      pageData2: {},
      chart1Data: {
        toolbox: {
          feature: {
            restore: {},
            saveAsImage: {}
          }
        },
        series: [
          {
            name: "合格率",
            type: "gauge",
            center: ["25%", "50%"], // 默认全局居中
            radius: "80%",
            min: 60,
            max: 100,
            startAngle: 180,
            endAngle: 0,
            splitNumber: 4,
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: [
                  [0.675, "#FF7678"],
                  [0.85, "#FEE602"],
                  [1, "#72C88A"]
                ],
                width: 10
              }
            },
            axisTick: {
              // 坐标轴小标记
              length: 13, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "auto"
              }
            },
            splitLine: {
              // 分隔线
              length: 13, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                color: "auto"
              }
            },
            pointer: {
              width: 3
            },
            // title: {
            //   offsetCenter: [0, "-30%"] // x, y，单位px
            // },
            detail: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              show: false,
              fontWeight: "bolder"
            },
            data: [{ value: 98 }]
          },
          {
            name: "合格率",
            type: "gauge",
            center: ["75%", "50%"], // 默认全局居中
            radius: "80%",
            min: 0,
            max: 12,
            startAngle: 180,
            endAngle: 0,
            splitNumber: 12,
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: [
                  [0.58333, "#FF7678"],
                  [0.72, "#72C88A"],
                  [1, "#FEE602"]
                ],
                width: 10
              }
            },
            axisTick: {
              // 坐标轴小标记
              length: 13, // 属性length控制线长
              splitNumber: 2,
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "auto"
              }
            },
            splitLine: {
              // 分隔线
              length: 13, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                color: "auto"
              }
            },
            pointer: {
              width: 3
            },
            // title: {
            //   offsetCenter: [0, "-30%"] // x, y，单位px
            // },
            detail: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              show: false,
              fontWeight: "bolder"
            },
            data: [{ value: 8 }]
          }
        ]
      },
      chart2Data: {
        color: ["#3398DB"],
        grid: {
          height: 120,
          top: 30
        },
        xAxis: [
          {
            type: "category",
            data: ["1-1", "1-2", "1-3", "1-4", "1-5", "1-6", "1-7"],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "效率比"
          }
        ],
        series: [
          {
            name: "效率比",
            label: {
              show: true,
              position: "top"
            },
            type: "bar",
            barWidth: "20%",
            data: [78, 56, 76, 111, 79, 60, 56]
          }
        ]
      },
      chart3Data: {
        legend: {
          data: ["任务1", "任务2", "任务3", "任务4", "任务5"],
          bottom: 0
        },
        grid: {
          height: 75,
          top: 30
        },
        color: ["#FD9981", "#7BDADF", "#E5A5E1", "#98B0E6", "#FCB921"],
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["1-1", "1-2", "1-3", "1-4", "1-5", "1-6", "1-7"]
        },
        yAxis: {
          type: "value",
          name: "(分钟)"
        },
        series: [
          {
            name: "任务1",
            type: "line",
            stack: "总量",
            data: [12, 13, 10, 13, 90, 23, 21]
          },
          {
            name: "任务2",
            type: "line",
            stack: "总量",
            data: [22, 12, 11, 24, 29, 33, 31]
          },
          {
            name: "任务3",
            type: "line",
            stack: "总量",
            data: [-50, 23, 20, 15, 10, 30, 40]
          },
          {
            name: "任务4",
            type: "line",
            stack: "总量",
            data: [32, 33, 31, 33, 30, 30, 30]
          },
          {
            name: "任务5",
            type: "line",
            stack: "总量",
            data: [80, 92, 91, 94, 10, 30, 20]
          }
        ]
      },
      chart4Data: {
        tooltip: {
          trigger: "item",
          formatter: "{b}:{d}%"
        },
        color: ["#70C88B", "#FF7777", "yellow", "blueviolet"],
        label: { formatter: "{b}:{d}%" },
        series: [
          {
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            data: [
              { value: 80, name: "合格率" },
              { value: 20, name: "不合格率" }
            ]
          }
        ]
      },
      chart5Data: {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["1-1", "1-2", "1-3", "1-4", "1-5", "1-6", "1-7"]
        },
        grid: {
          height: 120,
          top: 30
        },
        yAxis: {
          type: "value",
          name: "(次)"
        },
        color: ["#91C2F6"],
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true,
            label: {
              show: true,
              position: "top"
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#91C2F6"
                  },
                  {
                    offset: 1,
                    color: "rgba(255,255,255,0)"
                  }
                ])
              }
            }
          }
        ]
      },
      tableData: [],
      tableData2: [],
      tableData3: [],
      listLoading3: true,
      listLoading2: false,
      listLoading: true,
      activeName: "first"
    };
  },
  computed: {
    ...mapGetters(["name"]),
    swiper() {
      return this.$refs.mySwiper.$swiper;
    }
  },
  async created() {
    this.initData();
  },
  async mounted() {
    const getEchartsData1 = await getEchartsData({ type: "taskStatus" });
    const getEchartsData2 = await getEchartsData({ type: "effectiveness" });
    const getEchartsData3 = await getEchartsData({ type: "orderTask" });
    const getEchartsData4 = await getEchartsData({ type: "productQuality" });
    const getEchartsData5 = await getEchartsData({ type: "alarm" });
    // 图表1
    this.chart1Data.series[0].data[0].value =
      getEchartsData1.data.taskStatus.passRate; // 合格率
    this.chart1Data.series[1].data[0].value =
      getEchartsData1.data.taskStatus.runTime; // 运行时间
    // this.chart1Data.num = getEchartsData1.data.taskStatus.peoples // 用工数：
    this.$set(this.chart1Data, "num", getEchartsData1.data.taskStatus.peoples);
    this.$set(
      this.chart1Data,
      "totolh",
      getEchartsData1.data.taskStatus.totalTime
    );
    this.$set(
      this.chart1Data,
      "kw",
      getEchartsData1.data.taskStatus.powerConsumption
    );
    // this.chart1Data.totolh = getEchartsData1.data.taskStatus.totalTime // 总工时：
    // this.chart1Data.kw = getEchartsData1.data.taskStatus.powerConsumption // 耗电量：
    // 图表2
    this.chart2Data.xAxis[0].data = getEchartsData2.data.effectiveness.xAxis; // X轴数据 ['1-1', '1-2', '1-3', '1-4', '1-5', '1-6', '1-7']
    this.chart2Data.series[0].data = getEchartsData2.data.effectiveness.value; // 值 [78, 56, 76, 111, 79, 60, 56]
    // 图表3
    this.chart3Data.legend.data = getEchartsData3.data.orderTask.taskList; // 底下图例任务名称 ['任务1', '任务2', '任务3', '任务4', '任务5']
    this.chart3Data.xAxis.data = getEchartsData3.data.orderTask.xAxis; // X轴数据  ['1-1', '1-2', '1-3', '1-4', '1-5', '1-6', '1-7']
    this.chart3Data.series = getEchartsData3.data.orderTask.value; // 值[{name: '任务1',type: 'line',stack: '总量',data: [12, 13, 10, 13, 90, 23, 21]},{name: '任务2',type: 'line',stack: '总量',data: [22, 12, 11, 24, 29, 33, 31]}。。。]
    // 图表4
    this.chart4Data.series[0].data = getEchartsData4.data.productQuality.value; // 值 [{ value: 80, name: '合格率' },{ value: 20, name: '不合格率' }]
    // 图表5
    this.chart5Data.xAxis.data = getEchartsData5.data.alarm.xAxis; // X轴数据 ['1-1', '1-2', '1-3', '1-4', '1-5', '1-6', '1-7']
    this.chart5Data.series[0].data = getEchartsData5.data.alarm.value; // 值[820, 932, 901, 934, 1290, 1330, 1320]
    this.initCharts();
    const el = document.getElementsByClassName("el-table__body-wrapper")[0];
    el.addEventListener("scroll", () => {
      this.scrolla(el);
    });
    const el2 = document.getElementsByClassName("el-table__body-wrapper")[1];
    // console.log(document.getElementsByClassName('el-table__body-wrapper')[1])
    setTimeout(() => {
      this.scrollb(el2);
    }, 1000);
  },
  methods: {
    goTo(name){
      this.$router.push({ name: name });
    },
    changeTabs() {
      console.log(this.activeName);
      if (this.activeName === "first") {
        this.swiper.slideTo(0, 1000, false);
      } else if (this.activeName === "second") {
        this.swiper.slideTo(1, 1000, false);
      } else {
        this.swiper.slideTo(2, 1000, false);
      }
    },
    scrollb(el) {
      this.tableData3 = [...this.tableData3, ...this.tableData3];
      const _h = el.offsetHeight;
      console.log(_h);
      const _th = el.getElementsByTagName("table")[0].offsetHeight;
      const _trh = el
        .getElementsByTagName("table")[0]
        .getElementsByTagName("tbody")[0]
        .getElementsByTagName("tr")[0].offsetHeight;
      setInterval(() => {
        const _stop = el.scrollTop;
        if (_stop >= (_th + _h) / 2 + _trh * 2) {
          el.scrollTop = 0;
          // this.tableData2.splice(0, this.tableData2.length / 2)
          // this.tableData2 = [...this.tableData2, ...this.tableData2]
          // this.ScrollTop(0, el, 500)
        } else {
          el.scrollTop += _trh;
          // this.ScrollTop((el.scrollTop + _trh), el, 500)
        }
        console.log(_h, _stop, _trh);
      }, 3000);
    },
    ScrollTop(number = 0, el, time) {
      if (!time) {
        document.body.scrollTop = el.scrollTop = number;
        return number;
      }
      const spacingTime = 20; // 设置循环的间隔时间  值越小消耗性能越高
      let spacingInex = time / spacingTime; // 计算循环的次数
      let nowTop = el.scrollTop; // 获取当前滚动条位置
      const everTop = (number - nowTop) / spacingInex; // 计算每次滑动的距离
      const scrollTimer = setInterval(() => {
        if (spacingInex > 0) {
          spacingInex--;
          this.ScrollTop((nowTop += everTop), el);
        } else {
          clearInterval(scrollTimer); // 清除计时器
        }
      }, spacingTime);
    },
    scrolla(el) {
      const _h = el.offsetHeight;
      console.log(_h);
      const _th = el.getElementsByTagName("table")[0].offsetHeight;
      const _stop = el.scrollTop;
      if (_stop >= _th - _h && this.hasNaxtPage) {
        getList().then(response => {
          if (response.success) {
            this.tableData = [...this.tableData, ...response.data.list];
            this.hasNaxtPage = response.data.pageData.hasNaxtPage;
            this.pageData = response.data.pageData;
          } else {
            this.$message.error(response.message);
          }
        });
      }
    },
    statuscColor(val) {
      if (val === "未领取") {
        return "color:#ccc";
      } else if (val === "准备中") {
        return "color:#FDA235";
      } else {
        return "";
      }
    },
    initCharts() {
      this.chart1 = echarts.init(document.getElementById("echarts-1"));
      this.chart2 = echarts.init(document.getElementById("echarts-2"));
      this.chart3 = echarts.init(document.getElementById("echarts-3"));
      this.chart4 = echarts.init(document.getElementById("echarts-4"));
      this.chart5 = echarts.init(document.getElementById("echarts-5"));
      this.setOptions();
    },
    setOptions() {
      this.chart1.setOption(this.chart1Data);
      this.chart2.setOption(this.chart2Data);
      this.chart3.setOption(this.chart3Data);
      this.chart4.setOption(this.chart4Data);
      this.chart5.setOption(this.chart5Data);
    },
    initData() {
      this.listLoading = true;
      getList().then(response => {
        this.tableData = response.data.list;
        this.hasNaxtPage = response.data.pageData.hasNaxtPage;
        this.pageData = response.data.pageData;
        this.listLoading = false;
      });
      // this.listLoading2 = true;
      // getList2().then(response => {
      //   this.tableData2 = response.data.list;
      //   this.listLoading2 = false;
      // });
      this.listLoading3 = true;
      getList3().then(response => {
        this.tableData3 = response.data.list;
        this.listLoading3 = false;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.h_l {
  float: left;
  width: 350px;
  height: 100vh;
  overflow-y: scroll;
  padding: 20px 10px 20px 20px;
  .box-card {
    margin-top: 15px;
  }
  .box-card:first-child {
    margin-top: 0px;
  }
}
.h_r {
  margin-left: 350px;
  padding: 20px 20px 20px 0px;
}
/deep/ .el-card__header {
  padding: 10px 20px;
  span {
    margin: 5px 0;
    float: left;
    height: 16px;
    line-height: 16px;
    font-size: 14px;
    padding-left: 10px;
    border-left: #2b99fa solid 2px;
  }
  a {
    line-height: 22px;
  }
}
/deep/ .el-card__body {
  padding: 20px 10px;
  position: relative;
}
/deep/ .el-icon-s-data {
  transform: rotate(90deg);
  color: #2a9af8;
}
.echarts-div {
  width: 100%;
  height: 170px;
  margin: 0 auto;
}
.box-card1 /deep/ .el-card__body {
  height: 160px;
  overflow: hidden;
}
.echarts-tip {
  position: absolute;
  margin-top: 15px;
  text-align: left;
  color: #999;
  span {
    color: #333;
  }
}
.echarts-tip1 {
  left: 45px;
  top: 0;
}
.echarts-tip2 {
  left: 190px;
  top: 0;
}
.echarts-tip3 {
  left: 15px;
  top: 115px;
}
.echarts-tip4 {
  left: 50%;
  transform: translate(-50%, 0);
  top: 115px;
}
.echarts-tip5 {
  right: 15px;
  top: 115px;
}
</style>
